<template>
  <div class="section">
    <div class="title-box">双网营销管理</div>
    <div class="centent-box">

      <div class="centent-top flex">
        <el-button type="primary" style="height:32px;padding: 0 15px;"><i class="el-icon-folder-add"></i> 新建活动
        </el-button>
        <el-input class="centent-top-input flex" placeholder="请输入活动标题搜索" suffix-icon="el-icon-search" v-model="search">
        </el-input>
      </div>

      <div class="centent-table">
        <el-table :data="tableData" height="100%" style="width: 100%">
          <el-table-column prop="title" label="活动标题" width="250" align="center">
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
          </el-table-column>
          <el-table-column prop="endTime" label="报名截止时间" align="center">
          </el-table-column>
          <el-table-column prop="access" label="访问人数" align="center">
          </el-table-column>
          <el-table-column prop="toSignUp" label="报名人数" align="center">
          </el-table-column>
          <el-table-column prop="subscribe" label="预约直播人数" align="center">
          </el-table-column>
          <el-table-column prop="money" label="已发放奖金额" align="center">
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>上架</el-dropdown-item>
                  <router-link to="/marketingEditor">
                    <el-dropdown-item>编辑</el-dropdown-item>
                  </router-link>
                  <el-dropdown-item>复制</el-dropdown-item>
                  <el-dropdown-item>考核奖励</el-dropdown-item>
                  <el-dropdown-item>数据统计</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="centent-pagination flex">
        <el-pagination :page-sizes="[2, 10, 20, 40]" :page-size="100" layout="sizes, prev, pager, next" :total="3">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped src="./marketing.less">

</style>
<script>

export default {
  name: 'marketing',

  data() {
    return {
      search: '',
      tableData: [{
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }]
    }
  }
}
</script>
